import Vue from 'vue'
import VueRouter from 'vue-router'
import { getLocal } from '@/utils/Local.js'
import store from '@/store'
Vue.use(VueRouter)
// 解决重复跳转当前路由报错,直接catch原型的push方法,就不会在控制台上报错了
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (location) {
  return originalPush.call(this, location).catch(err => err) // catch这个方法就不会在控制台报错了
}
const routes = [
  { path: '/', redirect: '/login' },
  { path: '/login', component: () => import('@/views/login/Login') },
  {
    path: '/home',
    component: () => import('@/views/home/Home'),
    redirect: '/home/index',
    children: [
      {
        path: '/home/index',
        component: () => import('@/views/home/index/Index'),
        meta: {
          needTab: true
        }
      },
      {
        path: '/home/IndexInfo',
        component: () => import('@/views/home/index/IndexInfo')
      },
      // 我的页面
      {
        path: '/home/my',
        component: () => import('@/views/home/my/My'),
        meta: {
          needLogin: true,
          needTab: true
        }
      },
      // 我的咨询
      {
        path: '/home/consult',
        component: () => import('@/views/home/my/MyConsult')
      },
      // 视频页面
      {
        path: '/home/play',
        component: () => import('@/views/home/play/Play'),
        meta: {
          needTab: true
        }
      },
      // 问答页面
      {
        path: '/home/question',
        component: () => import('@/views/home/question/Question'),
        meta: {
          needTab: true
        },
        children: [
          // 问答搜索页
          {
            name: 'questionSearch',
            path: '/home/question/questionSearch',
            component: () => import('@/views/home/question/QuestionSearch'),
            meta: {}
          },
          // 问答详情页
          {
            name: 'questionInfo',
            path: '/home/question/questionInfo/:id?',
            component: () => import('@/views/home/question/QuestionInfo')
          }
        ]
      },
      // 我的资料页面
      {
        path: '/home/myInfo/',
        meta: {
          needLogin: true
        },
        component: () => import('@/views/home/my/myInfo')
      },
      // 我的昵称修改页面
      {
        path: '/home/editInfo/',
        meta: {
          needLogin: true
        },
        component: () => import('@/views/home/my/editInfo')
      },
      // 我的设置页面
      {
        path: '/home/mySet/',
        meta: {
          needLogin: true
        },
        component: () => import('@/views/home/my/mySet')
      }
    ]
  }
]
const router = new VueRouter({
  routes
})
// 配置全局后置守卫
router.afterEach((to, from) => {
  // 进入每个页面都滚动到顶部
  window.scrollTo(0, 0)
})
// 配置全局前置守卫
router.beforeEach(async (to, from, next) => {
  // 根据路由元判断要去的路由是否需要登录
  if (!to.meta.needLogin) {
    // 不需要登陆的直接放行
    next()
    // 如果有token但是不是登录状态,可以获取一下用户信息,在文章详情页这种不需要登录就能访问的页面用到了用户信息的东西,可以偷偷登录一下
    if (getLocal('token') && !store.state.isLogin) {
      // 重新请求用户信息保存到vuex 修改登录状态
      store.dispatch('refreshUserInfo')
    }
  } else {
    // 需要登录的判断是否已登录
    if (store.state.isLogin) {
      // 如果是已经登录的就放行
      next()
    } else {
      // 如果没有登录就判断是否有token
      if (getLocal('token')) {
        // 如果有token就请求用户信息并存入vuex 修改登录状态
        store.dispatch('refreshUserInfo')
        // 放行
        next()
      } else {
        // 如果没有token就去登录页,将当前路由值带过去,便于登陆成功后回到登录前的路由页面
        // 从to中拿到要去的路由地址,to.path和to.fullPath的区别就是后者带参数后者不带参数,我们要把参数带上,所以用后者
        next(`/login?redirect=${to.fullPath}`)
      }
    }
  }
})
export default router
